<template>
  <view class="page">
    <!-- 顶部登录区域 -->
    <view class="login-section">
      <div class="cover-detail">
        <image alt="" class="login-cover-image" v-if="designerUser.avatar"  :src="designerUser.avatar"></image>
        <image class="login-cover-image" v-else src="/static/images/login-cover.png" mode=""></image>
        <view class="login-detail" @click="handleLogin">
          <view class="login-prompt">{{designerUser.nickname || '点击登录/注册'}}
            <image alt=""  class="right-icon" src="https://cos.aitshirt.cn/app-icon/%E8%B7%AF%E5%BE%84%20224%402x.png"></image>
          </view>
          <view class="login-desc" v-if="!designerUser.avatar">可查看更多信息</view>
        </view>
      </div>
      <div class="sys" @click="handleLogin">
        <image class="sys-image" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201848%402x.png" mode=""></image>
      </div>
    </view>
    <!-- 统计数据区域 -->
    <view class="stats-section">
      <view class="stat-item" @click="navigateTo('/subPage/design/sales')">
        <text class="stat-value">{{ designerUser.designerInfo?.totalOrders|| 0 }}</text>
        <text class="stat-label">销售量</text>
      </view>
      <view class="stat-item"  @click="navigateTo('/subPage/design/like')">
        <text class="stat-value">{{ designerUser.designerInfo?.designerLikeCount || 0 }}</text>
        <text class="stat-label">获赞</text>
      </view>

      <view class="stat-item"  @click="navigateTo('/subPage/design/follower')">
        <text class="stat-value">{{ designerUser.designerInfo?.designerFollowCount  || 0}}</text>
        <text class="stat-label">粉丝</text>
      </view>
      <view class="stat-item"  @click="navigateTo('/subPage/design/guanzhu/guanzhu')">
        <text class="stat-value">{{ designerUser?.followCount  || 0}}  </text>
        <text class="stat-label">关注</text>
      </view>
    </view>

    <!-- 功能入口区域 -->
    <view class="function-section">
      <view class="function-item" @click="navigateTo('/subPage/design/me/me')">
        <div class="function-detail">
          <div class="function-name">作品中心</div>
          <div class="function-desc">快来查看作品吧！</div>
        </div>
        <image class="function-icon works-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201810%402x.png"></image>
      </view>
      <view class="function-item" @click="navigateTo('/pages/wallet/mine/mine')">
        <div class="function-detail">
          <div class="function-name">我的钱包</div>
          <div class="function-desc">可以体现哦！</div>
        </div>
        <image class="function-icon wallet-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201804%402x.png"></image>
      </view>
    </view>

    <!-- 订单状态区域 -->
    <view class="order-section">
      <view class="section-title-header">
        <view class="section-title">我的订单</view>
        <view class="order-all" @click="navigateTo('/pages/order/MyOrder/MyOrder')">全部订单</view>
      </view>
      <view class="order-status">
        <view class="status-item" @click="navigateTo('/pages/order/MyOrder/MyOrder?type=0')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201816%402x.png" mode="heightFix"></image>
          <text class="status-name">待付款</text>
        </view>
        <view class="status-item" @click="navigateTo('/pages/order/MyOrder/MyOrder?type=1')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201818%402x.png" mode="heightFix"></image>

          <text class="status-name">待发货</text>
        </view>
        <view class="status-item" @click="navigateTo('/pages/order/MyOrder/MyOrder?type=2')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201823%402x.png" mode="heightFix"></image>

          <text class="status-name">待收货</text>
        </view>
        <view class="status-item" @click="navigateTo('/pages/order/MyOrder/MyOrder?type=4')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201827%402x.png" mode="heightFix"></image>
          <text class="status-name">已完成</text>
        </view>
      </view>
    </view>

    <!-- 其他功能区域 -->
    <button open-type="share" class="designer-section">
      <div class="left">
        <image class="other-icon join-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202157%402x.png"></image>
        <text class="other-name " style="height: 28rpx;
font-weight: bold;
font-size: 28rpx;
color: #222222;
line-height: 40rpx;">品牌/个人设计师入驻</text>
      </div>
      <div class="left right">
        <text class="other-desc">诚邀优质商家</text>
        <image alt="" class="right-icon" src="https://cos.aitshirt.cn/app-icon/%E8%B7%AF%E5%BE%84%20224%402x.png"></image>
      </div>
    </button>

    <view class="order-section">
      <view class="section-title-header">
        <view class="section-title">更多功能</view>
      </view>
      <view class="order-status">
<!--        <view class="status-item" @click="navigateTo('orders', 'all')">-->
<!--          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201833%402x.png" mode="heightFix"></image>-->
<!--          <text class="status-name">浏览记录</text>-->
<!--        </view>-->
        <view class="status-item" @click="navigateTo('/subPage/design/collect/collect')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201969%402x.png" mode="heightFix"></image>
          <text class="status-name">我的收藏</text>
        </view>
        <view class="status-item" @click="navigateTo('/pages/user/AddressManagement/AddressManagement')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201835%402x.png" mode="heightFix"></image>
          <text class="status-name">收获地址</text>
        </view>
        <view class="status-item" @click="navigateTo('/pages/user/coupon/UserCoupon/UserCoupon')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202169%402x.png" mode="heightFix"></image>
          <text class="status-name">优惠券</text>
        </view>
        <button class="status-item contacButton" open-type="contact" plain="true" hover-class="none">
            <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202318%402x.png" mode="heightFix"></image>
            <text class="status-name">客服</text>
        </button>
        <view class="status-item" @click="navigateTo('/pages/feedback/feedback')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202319%402x.png" mode="heightFix"></image>
          <text class="status-name">意见反馈</text>
        </view>
        <view class="status-item" @click="navigateTo('/pages/invoice/invoice')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202171%402x.png" mode="heightFix"></image>
          <text class="status-name">开票中心</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 处理登录
import { getDesignUser } from "@/api/designUser";
import { onShow ,onShareAppMessage} from "@dcloudio/uni-app";
import {shallowRef}  from "vue";

const handleLogin = () => {
  if(!designerUser.value?.uid) {
    uni.navigateTo({
      url: '/pages/login/index',
    });
  }else {
    uni.navigateTo({
      url: '/pages/me/update',
    });
  }
};

// 页面导航
const navigateTo = (page, type = '') => {
  if (page) {
    uni.navigateTo({
      url: page,
    });
  }
};

const designerUser = shallowRef({});
function queryDesignUser() {
  getDesignUser().then((res) => {
    designerUser.value = res.data;
  });
}
onShow(() => {
  queryDesignUser();
})

onShareAppMessage(() => {
  return {
    title: 'AIT shirt',
    path: '/pages/home/home'
  }
})
</script>

<style lang="scss" scoped>
.right-icon {
  width: 12rpx;
  height: 20rpx;
  margin-left: auto;
}
.page {
  background: #ffffff;
}
.login-section {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background: #ffffff;
  .cover-detail {
    display: flex;
    align-items: center;
    .login-cover-image {
      width: 100rpx;
      height: 100rpx;
      background: #f25a27;
      border: 2rpx solid #ffa5a5;
      border-radius: 50%;
    }
    .login-detail {
      padding: 0 24rpx;
      .login-prompt {
        display: flex;
        align-items: center;
        height: 42rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #222222;
        line-height: 42rpx;
        gap: 12rpx;
      }
      .login-desc {
        height: 32rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 32rpx;
        margin-top: 12rpx;
      }
    }
  }
  .sys {
    .sys-image {
      width: 32rpx;
      height: 30rpx;
    }
  }
}

.stats-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 58rpx;
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .stat-value {
      height: 42rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #222222;
      line-height: 42rpx;
      text-align: center;
    }
    .stat-label {
      height: 32rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 32rpx;
      text-align: center;
      margin-top: 6rpx;
    }
  }
}

.function-section {
  display: flex;
  align-items: center;
  padding: 0 16rpx;
  gap: 24rpx;
  margin: 16rpx 0;
  .function-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 347rpx;
    height: 148rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 16rpx;
    .function-detail {
      .function-name {
        font-weight: bold;
        font-size: 32rpx;
        color: #222222;
        line-height: 44rpx;
      }
      .function-desc {
        font-weight: 400;
        font-size: 24rpx;
        color: #6f6f6f;
        line-height: 32rpx;
        margin-top: 8rpx;
      }
    }
    .function-icon {
      width: 84rpx;
      height: 84rpx;
      box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0, 0, 0, 0.08);
    }
  }
}

.order-section {
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin: 22rpx 16rpx 0;
  padding: 34rpx 24rpx 0;
  .section-title-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .section-title {
      height: 28rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
      line-height: 28rpx;
      position: relative;
      &::after {
        position: absolute;
        bottom: -4rpx;
        left: 0;
        content: '';
        width: 72rpx;
        height: 4rpx;
        background: #f25a27;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
      }
    }
    .order-all {
      width: 114rpx;
      height: 40rpx;
      background: #f3f7f8;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      font-weight: 400;
      font-size: 20rpx;
      color: #222222;
      line-height: 40rpx;
      text-align: center;
    }
  }
  .order-status {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 30rpx 0 0;
    .status-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 36rpx;
      .status-icon {
        width: 48rpx;
        height: 44rpx;
      }
      .status-name {
        height: 32rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
        line-height: 32rpx;
        text-align: center;
        margin-top: 20rpx;
      }
    }
  }
}

.designer-section {
  height: 96rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26rpx;
  margin: 22rpx 16rpx;
  .left {
    display: flex;
    align-items: center;
    gap: 12rpx;
    .other-icon {
      width: 48rpx;
      height: 48rpx;
    }
    .orther-name {
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
      line-height: 28rpx;
    }
  }
  .right {
    .other-desc {
      font-weight: 400;
      font-size: 24rpx;
      color: #6f6f6f;
      line-height: 32rpx;
    }
  }
}
</style>
